<template>
    <view class="details-page">
        <view class="tab-nav-border">
            <uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem" style-type="text" active-color="#0B72B4"></uni-segmented-control>
            <view class="bor"></view>
        </view>
        <view class="content">
            <view v-show="current === 0">
                <view class="tab-info" v-show="isPermission0('equipment_detail')">
                    <image :src="img_pic" mode=""></image>
                    <view class="txt-box">
                        <view v-for="(item, index) in baseInfo.arr" :key="index">
                            <text class="tg"></text>
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-show="current === 1">
                <view class="real-time">
                    <!-- <view class="time-txt">数据时间：{{dataTime}}</view> -->
                    <row :arr="realTime.overView"></row>
                    <!-- 		<view class="row4-view flex-box">
</view> -->
                    <!-- 表格 -->
                    <view class="table-box">
                        <view class="table-tt">
                            <view class="tr flex-box">
                                <view class="td">属性名称</view>
                                <view class="td">属性值</view>
                                <view class="td w">更新时间</view>
                                <view class="td">操作</view>
                            </view>
                            <view class="tr flex-box nav" v-if="tops">
                                <view class="td">属性名称</view>
                                <view class="td">属性值</view>
                                <view class="td w">更新时间</view>
                                <view class="td">操作</view>
                            </view>
                        </view>
                        <view class="table-body">
                            <view class="tr flex-box" v-for="(item, index) in realTime.table" :key="index">
                                <view class="td">{{ item.type_name }}</view>
                                <!-- <view v-for="(item,index) in arrayTime" :key="index">  -->
                                <!-- </view> -->
                                <view class="td">{{ item.data_value }}</view>
                                <view class="td w">{{ item.updated_at }}</view>
                                <view class="td"><button class="mini-btn" size="mini" @tap="bindSee(item)" v-if="errCode!=401 && errCode!=601">查看</button></view>
                            </view>
                            <view class="tr flex-box" style="justify-content:center;font-size: 25rpx;
color: #928597;
">没有更多数据了...</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-show="current === 2">
                <!-- 历史数据 -->
                <view class="history" v-if="isPermission2('data_list')">
                    <!-- <view class="selectTop">
                        请先选择设备寄存器
                    </view> -->
                    <view class="picker-box flex-box">
                        <view class="picker-item">
                            <view @tap="changeShow('QS_Picekr_custom2_1')" class="register">{{Ename}}</view>
                            <!-- <picker @change="bindPickerChange" :value="index" :range="array" class="register">{{Ename}}</picker> -->
                        </view>
                        <view class="picker-item">
                            <picker @change="bindPickerDay" :value="history.date" mode="date">
                                <view class="flex-box">
                                    <text class="fx1">{{ history.date }}</text>
                                    <view class="icon calender"></view>
                                </view>
                            </picker>
                        </view>
                    </view>
                    <!-- tab -->
                    <view class="history-tab">
                        <!-- <view class="pd">
                            <uni-segmented-control :current="history.currentIndex" :values="history.hour" @clickItem="onHiotryItem" style-type="buttom" active-color="#0062A1"></uni-segmented-control>
                        </view> -->
                        <view class="qiun-columns">
                            <view class="qiun-charts">
                                <canvas v-show="!radarImg" canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
                                <image v-if="radarImg" :src="radarImg" class="charts" />
                            </view>
                            <QSpicker type="custom2" ref="QS_Picekr_custom2_1" pickerId="custom2_1" :dataSet="custom2Set_1" showReset @hideQSPicker="hideQSPicker($event)" @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" height=.4 />
                        </view>
                        <view v-show="history.currentIndex === 0">
                            <!-- 表格 -->
                            <view class="table-box">
                                <view class="table-tt">
                                    <view class="tr flex-box ">
                                        <view class="td w">时间</view>
                                        <view class="td">属性值</view>
                                        <view class="td">答应结果</view>
                                    </view>
                                    <view class="tr flex-box nav" v-show="top">
                                        <view class="td w">时间</view>
                                        <view class="td">属性值</view>
                                        <view class="td">答应结果</view>
                                    </view>
                                </view>
                                <view class="table-body">
                                    <view class="tr flex-box" v-for="(item, index) in realTime.table2" :key="index">
                                        <view class="td w">{{ item.created_at }}</view>
                                        <view class="td">{{ item.data_value}}</view>
                                        <view class="td">{{ item.status_name}}</view>
                                    </view>
                                    <view class="td noData" v-show="isShow" style="width:200rpx;">暂无数据...</view>
                                </view>
                            </view>
                        </view>
                        <view v-show="history.currentIndex === 1">
                            <!-- 表格 -->
                            <view class="table-box">
                                <view class="table-tt">
                                    <view class="tr flex-box">
                                        <view class="td w">时间</view>
                                        <view class="td">属性值</view>
                                        <view class="td">答应结果</view>
                                    </view>
                                </view>
                                <view class="table-body">
                                    <view class="tr flex-box" v-for="(item, index) in realTime.table2" :key="index">
                                        <view class="td w">{{ item.created_at }}</view>
                                        <view class="td">{{ item.data_value}}</view>
                                        <view class="td">{{ item.status_name}}</view>
                                    </view>
                                    <view class="td noData" v-show="isShow" style="width:200rpx;">暂无数据...</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 视频监控 -->
            <view v-show="current === 3">
                <view class="videos" v-if="isPermission('camera_videoList')">
                    <view class="video-box flex-box">
                        <view class="item" v-for="(item, index) in videos" :key="index">
                            <video initial-time='0.01' :src="item.hls_url" :id="item.id" :key="item.id" style="width:350rpx; height: 225rpx;">
                            </video>
                            <view>
                                <view style="text-align:center;font-size:32rpx">{{ item.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 设备控制 -->
            <view v-show="current === 4">
                <view class="device-control">
                    <view class="table-box">
                        <view class="table-tt">
                            <view class="tr flex-box">
                                <view class="td">数据名称</view>
                                <view class="td ">数据值</view>
                                <view class="td">操作</view>
                                <view class="td">操作历史</view>
                            </view>
                            <view class="tr flex-box nav" v-show="topss">
                                <view class="td">数据名称</view>
                                <view class="td ">数据值</view>
                                <view class="td">操作</view>
                                <view class="td">操作历史</view>
                            </view>
                        </view>
                        <view class="table-body" v-show="rank_type">
                            <view class="tr flex-box" v-for="(item,index) in device" :key="index">
                                <!-- <view class="td">{{ item.name }}</view> -->
                                <view class="td">{{ item.name }}</view>

                                <view class="td tdValue">
                                    <view v-show="item.type !=2" class="tdIn" style="position: relative;">
                                        <input class="uni-input" type="number" placeholder="请输入数值" v-model="item.equipment_data" @input="onKeyInput" style="color:#928597;width:150rpx" />
                                        <img src="../../static/images/icon/修改.png" class="tdInImage"></img>
                                    </view>
                                    <view v-show="item.type == 2" class="tdIn" style="position: relative;">
                                        <view v-show="item.equipment_data == 0" style="position:absolute ;right: 98rpx;top: -5px; color:#928597">关</view>
                                        <view v-show="item.equipment_data != 0" style="position:absolute ;right: 98rpx;top: -5px; color:#928597">开</view>
                                        <switch :checked="item.equipment_data == 0 ? false : true" :data-item="item" @change="switch1Change" :id="item.id" color="#0c69a4" style="transform:scale(0.6);
                                        position:absolute;
                                        right: -10rpx;
                                        top: -25rpx;
                                        " />
                                    </view>
                                </view>

                                <view class="td"><button class="mini-btn" size="mini" @tap="operate(item)">下发控制</button></view>
                                <view class="td"><button class="mini-btn" size="mini" @tap="checkHistory(item)">查看</button></view>
                            </view>
                            <view>
                                <view style="color:red;font-size:20rpx;display:flex; justify-content: center">注*下发控制设备为数据名称的寄存器</view>
                            </view>
                        </view>
                        <view v-show=" !rank_type " class="rank_type">您暂无查看权限...</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Row from "../../comon/C/row4.vue";
import {
    uniSegmentedControl
} from "@dcloudio/uni-ui";
import uCharts from "../../comon/js/u-charts.min.js";
import {
    request
} from "../../comon/js/request.js";
import {
    uniLoadMore
} from "../../comon/js/load-more";
import
QSpicker
from "../../components/QuShe-picker/QuShe-picker.vue"
import log from '../../components/QS-inputs-split/config/js/log';
var _self;
var canvaLineA = null;

export default {
    //加载更多组件

    onLoad(option) {
        console.log(uni.getStorageSync("role_grade"), "12222222222222222")
        let role_grade = uni.getStorageSync("role_grade")
        this.getUserS(role_grade)
        //这里是  设备ID !!!
        this.id = option.id;
        console.log(this.id, "这里是传过来的设备id")
        _self = this;
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(500);
        this.getServerData();
        this.getMsg()
        this.getAllMsg()
        this.getnewDate()
        // this.getVideo()
        this.getHistoryData()
        this.getControl()
        this.getType_id()
        this.getDataTime()
        // this.confirm()
        this.getUserRank_type()
    },
    onshow() {
        this.getType_id()
    },
    onReady() {
        this.getVideo()
    },
    // 滚动的固定导航
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 100) {
            if (!this.topss) {
                this.topss = true
            }
        } else {
            if (this.topss) {
                this.topss = false
            }
        }

        if (e.scrollTop >= 200) {
            if (!this.tops) {
                this.tops = true
            }
        } else {
            if (this.tops) {
                this.tops = false
            }
        }

        if (e.scrollTop >= 400) {
            if (!this.top) {
                this.top = true
            }
        } else {
            if (this.top) {
                this.top = false
            }
        }
    },
    data() {
        return {
            errCode: "",
            radarImg: false,
            defaultId: 0,
            tId: "",
            defaultName: "",
            tops: false,
            top: false,
            topss: false,
            rank_type: 0,
            clicKtype_id: "",
            isShow: false,
            Ename: "选择寄存器",
            Etime: "",
            Ehour: "",
            custom2Set_1: {
                itemArray: [
                    [{
                        name: "a", //name变量名需与下方steps.steps_1_value相同
                        value: "a" //可添加多项自定义想要的数据
                    }],
                ],
                steps: {
                    step_1_value: "name", //第一级显示的属性名
                },
                defaultValue: [0, 0] //初始数据
            },
            img_pic: "",
            inputValue: "",
            dataTime: "",
            current: 1,
            id: "",
            tabs: ["基本信息", "实时数据", "历史数据", "视频监控", "设备控制"],
            baseInfo: {
                imgSrc: "../../static/logo1.png",
                arr: [

                ]
            },
            arr: [{
                equipment: "设备名称",
                name: "上海真弘"
            }],
            realTime: {
                overView: [{
                        number: 0,
                        des: "平均能耗"
                    },
                    {
                        number: 0,
                        des: "产能"
                    },
                    {
                        number: 0,
                        des: "能耗"
                    },
                    {
                        number: 0,
                        des: "进车数"
                    }
                ],
                table: [{
                    type_name: "",
                    updated_at: "",
                    data_value: ""
                }],
                // arrayTime:[],
                table2: [{}]
            },
            history: {
                current: 0,
                date: "选择时间",
                array: ["一区温度", "二区温度", "三区温度", "四区温度"],
                hour: ["当前设备近2小时", "当前设备近4小时"],
                currentIndex: 0
            },
            cWidth: "",
            cHeight: "",
            pixelRatio: 1,
            LineA: {
                //横坐标["",""]
                categories: [

                ],
                // 纵坐标data["",""]
                series: [{
                    name: "温度",
                    data: []
                }]
            },
            videos: [],
            device: [{
                name: "紧急状态",
                des: "10"
            }]
        };
    },
    watch: {
        'LineA.categories'() {
            this.getServerData()
        },
        'isShow'() {
            this.confirm()
        },

    },
    methods: {
        //隐藏详细列表
        isPermission0(name) {
            let data = uni.getStorageSync("equipmentManagement") // 缓存起来的数组
            if (data.length) {
                return data.includes(name)
            }
            return false
        },
        //隐藏摄像头
        isPermission(name) {
            let data = uni.getStorageSync("camera_videoList") // 缓存起来的数组
            if (data.length) {
                return data.includes(name)
            }
            return false
        },
        //隐藏历史数据
        isPermission2(name) {
            let data = uni.getStorageSync("dataCenter") // 缓存起来的数组
            if (data.length) {
                return data.includes(name)
            }
            return false
        },
        // 修改自定义标题
        getNavigationBarTitle(name) {
            uni.setNavigationBarTitle({
                title: name
            });
        },
        getData(formData) {
            uni.request({
                url: "https://yl.solid-cn.com/wechat/v1/data/history",
                method: "GET",
                data: formData
            }).then(res => {
                console.log(res[1])
                this.realTime.table2 = res[1].data.result.list
                if (res[1].data.result == 700 || res[1].data.result.list == undefined) {
                    this.LineA.categories = []
                    this.LineA.series[0].data = []
                    return null
                }
                let hmArray = res[1].data.result.list.map(item => {
                    return item.hm
                })
                let valueAarray = res[1].data.result.list.map(item => {
                    return item.data_value
                })
                // console.log(hmArray.length)
                if (hmArray.length > 300 && valueAarray.length > 300) {
                    let hmArray2 = hmArray.filter((resItem, i) => {
                        if (i % 2 == 1) {
                            return resItem
                        }
                    })
                    let hmArray3 = hmArray2.filter((resItem2, i) => {
                        if (i % 2 == 1) {
                            return resItem2
                        }
                    })
                    let hmArray4 = hmArray3.filter((resItem3, i) => {
                        if (i % 2 == 1) {
                            return resItem3
                        }
                    })
                    let hmArray5 = hmArray4.filter((resItem4, i) => {
                        if (i % 2 == 1) {
                            return resItem4
                        }
                    })
                    this.LineA.categories = hmArray5.reverse()

                    let valueAarray2 = valueAarray.filter((resItem, i) => {
                        if (i % 2 == 1) {
                            return resItem
                        }
                    })
                    let valueAarray3 = valueAarray2.filter((resItem2, i) => {
                        if (i % 2 == 1) {
                            return resItem2
                        }
                    })
                    let valueAarray4 = valueAarray3.filter((resItem3, i) => {
                        if (i % 2 == 1) {
                            return resItem3
                        }
                    })
                    let valueAarray5 = valueAarray4.filter((resItem4, i) => {
                        if (i % 2 == 1) {
                            return resItem4
                        }
                    })
                    this.LineA.series[0].data = valueAarray5.reverse()
                } else {
                    // if (hmArray.length < 60 && valueAarray.length < 60) {
                    //     this.LineA.categories = hmArray.reverse()
                    //     this.LineA.series[0].data = valueAarray.reverse()
                    //     return null
                    // }
                    let hmArray2 = hmArray.filter((resItem, i) => {
                        if (i % 2 == 1) {
                            return resItem
                        }
                    })
                    // let hmArray3 = hmArray2.filter((resItem, i) => {
                    //     if (i % 2 == 1) {
                    //         return resItem
                    //     }
                    // })
                    let valueAarray2 = valueAarray.filter((resItem, i) => {
                        if (i % 2 == 1) {
                            return resItem
                        }
                    })
                    // let valueAarray3 = valueAarray2.filter((resItem, i) => {
                    //     if (i % 2 == 1) {
                    //         return resItem
                    //     }
                    // })
                    this.LineA.categories = hmArray2.reverse()
                    this.LineA.series[0].data = valueAarray2.reverse()
                }
            })

        },
        //点击播放视频
        clickVideo() {
            // this
        },
        //封装身份
        getUserS(role_grade) {
            if (role_grade !== 1) {
                this.tabs = this.tabs.slice(0, 4)
            }
        },
        //获取身份
        getUserRank_type() {
            request({
                url: "v1/passport/detail"
            }).then(res => {
                uni.setStorageSync("rank_type", res.data.result.rank_type)
                this.rank_type = uni.getStorageSync("rank_type")
                // console.log(res,uni.getStorageSync("rank_type"))
            })
        },
        statechange(e) {
            console.log('live-player code:', e.detail.code)
        },
        error(e) {
            console.error('live-player error:', e.detail.errMsg)
        },

        //获取当前年月日
        getYear() {
            let timestamp = Date.parse(new Date());
            let date = new Date(timestamp);
            //获取年份  
            let Y = date.getFullYear();
            //获取月份  
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
            //获取当日日期 
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return Y + '-' + M + '-' + D
            // console.log( Y + '-' + M + '-' + D)
        },
        getYear2() {
            let timestamp = Date.parse(new Date());
            let date = new Date(timestamp);
            //获取年份  
            let Y = date.getFullYear();
            //获取月份  
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
            //获取当日日期 
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            let D1 = D - 1
            return Y + '-' + M + '-' + D1
            // console.log( Y + '-' + M + '-' + D)
        },
        changeShow(name) {
            this.$refs[name].show();
        },
        showQSPicker(res) {
            const that = this
            uni.canvasToTempFilePath({
                x: 0,
                y: 0,
                canvasId: 'canvasLineA',
                success: function (res) {
                    console.log('w w w w www ', res.tempFilePath)
                    that.radarImg = res.tempFilePath
                }
            });

            console.log(`pickerId为${res.pickerId},  类型为${res.type}的QS-picker显示了`);
        },
        hideQSPicker(res) {
            setTimeout(() => {
                this.radarImg = false
            }, 500)
            console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
        },

        confirm(res) {
            console.log('获取了用户选择----->', res);
            this.Ename = res.data[0].name
            //此处id为寄存器id!!
            this.tId = res.data[0].id
            this.getData({
                equipment_id: this.id,
                type_id: this.tId,
                date: this.getYear(),
                near_hour: 24,
            })
            this.history.date = this.getYear()
        },
        bindPickerChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.target.value)
            this.index = e.target.value
        },
        //确定下发
        onKeyInput: function (event) {
            console.log(event)
            // this.inputValue = event.target.value
        },

        //设备控制
        getControl() {
            let than = this
            request({
                url: "v1/data/sendRegister?equipment_id",
                data: {
                    equipment_id: than.id
                },
                method: "GET"
            }).then(res => {
                console.log(res, than.id, "设备控制--------------------")
                let resData = res.data.result
                resData.forEach(item => {
                    if (item.type == 2) {
                        item.equipment_data == 0 ? item.switchData = '0000' : item.switchData = 'FF00'
                    }
                })
                this.device = resData
                // this.device[0].des = res.data.result[0].id
            })
        },
        //设备控制滑动选择
        switch1Change(e) {
            console.log('switch1 发生 change 事件，携带值为', e.target)
            this.device.forEach(item => {
                if (item.id == e.target.id) {
                    if (e.target.value) {
                        item.switchData = 'FF00'
                    } else {
                        item.switchData = '0000'
                    }
                }
            })
        },
        //绑定查看
        bindSee(item) {
            console.log(item.equipment_id, item.type_id, item.created_at)
            this.tId = item.type_id
            let clickequipment_id = item.equipment_id
            let clickcreated_at = item.created_at.slice(0, 9)
            this.current = 2
            this.Ename = item.type_name
            this.history.date = item.created_at.slice(0, 10)
            if (this.current === 2) {
                this.getData({
                    equipment_id: clickequipment_id,
                    type_id: this.tId,
                    date: this.getYear(),
                    near_hour: 24,
                })
                this.history.date = this.getYear()
            }
        },
        //获取信息
        getMsg() {
            request({
                url: `v1/equipment/detail/${this.id}`,
                method: "GET",
            }).then(res => {
                // console.log(res)
            })
        },
        //获取设备基本信息
        getAllMsg() {
            request({
                url: `v1/equipment/detail/${this.id}`,
                method: "GET"
            }).then(res => {
                // if(res.data.errorcode === 401){
                //     uni.setStorageSync("showTips0",res.data.messages)
                // }
                // console.log(this.id)
                console.log(res, "基本信息//////////////////////////////")
                let arr = [
                    `设备名称：${ res.data.result.name}`,
                    // `设备编号：${res.data.result.equipment_code}`,
                    `设备地址：${res.data.result.equipment_address}`,
                    `设备信息：隧道外尺寸:长${res.data.result.tunnel_abroad_long}米,宽${res.data.result.tunnel_abroad_width}米,高${res.data.result.tunnel_abroad_height}米`,
                    `隧道长度：${res.data.result.tunnel_long}米`,
                    `可装载面：宽:${res.data.result.carry_width},高${res.data.result.carry_height}(单位:mm)`,
                    `选用棚板规格: ${res.data.result.board_specs}`,
                    `棚板安放:${res.data.result.board_put}`,
                    `台车长度:${res.data.result.trolley_long}`,
                    `台车数:${res.data.result.trolley_num}`,
                    `窑内总容积:${res.data.result.kiln_volume}`,
                    `台车面积:${res.data.result.trolley_volume}`
                    // `所属用户：${res.data.result.user_name}`
                ]
                this.baseInfo.arr = arr
                this.img_pic = res.data.result.img_pic
                let name = res.data.result.name
                this.getNavigationBarTitle(name)

            })
        },
        //获取实时数据-数据时间
        getDataTime() {
            request({
                url: "v1/YieldReport/list",
                data: {
                    equipment_id: this.id,
                    statistics_date_start: "2019-10-10",
                    statistics_date_end: this.getYear()
                }
            }).then(res => {
                console.log(res, "999999999999999999999")
                let arr2 = res.data.result.list.data
                // arr2 = arr2.slice(-1)
                // console.log(arr2)
                // this.dataTime = arr2[0].statistics_date
                // let overView = [{
                //         number: arr2[0].unit_consumption.slice(0, 8),
                //         des: "平均能耗"
                //     },
                //     {
                //         number: arr2[0].yield.slice(0, 8),
                //         des: "产能"
                //     },
                //     {
                //         number: arr2[0].consumption.slice(0, 8),
                //         des: "能耗"
                //     },
                //     {
                //         number: arr2[0].card_num.slice(0, 8),
                //         des: "进车数"
                //     }
                // ]
                // this.realTime.overView = overView
            })
        },
        // showIndex(res) {
        //     uni.showModal({
        //         title: res.data.messages,
        //         showCancel: false,
        //         success: function (res) {}
        //     });
        // },
        //设备实时数据
        getnewDate() {
            uni.showLoading({
                title: '加载中',
            });
            request({
                url: "v1/data/newData",
                method: "GET",
                data: {
                    equipment_id: this.id
                },
            }).then(res => {
                // console.log("looktihs", res)
                if (res.data.errorcode === 401) {
                    this.errCode = 401
                    uni.hideLoading();
                    uni.showModal({
                        title: res.data.messages,
                        showCancel: false,
                        success: function (res) {}
                    });
                } else if (res.data.message === "设备尚未付费") {
                    this.errCode = 601
                    uni.hideLoading();
                    uni.showModal({
                        title: res.data.message,
                        showCancel: false,
                        success: function (res) {}
                    });
                } else {
                    this.getStatistics() // 如果有权限才调用
                    let arr = res.data.result.list
                    arr = arr.map(item => {
                        item.updated_at = item.updated_at.slice(5, 16)
                        return item
                    })
                    this.realTime.table = arr
                    uni.hideLoading();
                    console.log(res, "获取实时数据", this.arrayTime)
                }

            })
        },
        // 平均能耗,产能,能耗,进车数
        getStatistics() {
            uni.request({
                url: `https://yl.solid-cn.com/wechat/v1/yieId/newReport`,
                method: "GET",
                data: {
                    equipment_id: this.id
                }
            }).then(res => {
                console.log(res, " 平均能耗,产能,能耗,进车数 平均能耗,产能,能耗,进车数")
                this.dataTime = res[1].data.result.statistics_date
                let overView = [{
                        number: res[1].data.result.unit_consumption,
                        des: "平均能耗"
                    },
                    {
                        number: res[1].data.result.yield,
                        des: "产能"
                    },
                    {
                        number: res[1].data.result.consumption,
                        des: "能耗"
                    },
                    {
                        number: res[1].data.result.card_num,
                        des: "进车数"
                    }
                ]
                this.realTime.overView = overView
            })
        },
        //获取筛选寄存器id
        getType_id() {
            let than = this
            request({
                url: `v1/register/registerDetail/${this.id}`,
                method: "GET"
            }).then(res => {
                console.log(res, "获取寄存器idzzzzzzzzzzzzz")
                than.custom2Set_1.itemArray[0] = res.data.result
                this.tId = res.data.result[0].id
                this.defaultName = res.data.result[0].name
                this.Ename = this.defaultName

            })
        },
        // 历史数据
        getHistoryData() {
            request({
                url: "v1/equipment/all",
                method: "GET"
            }).then(res => {
                console.log(res, "历史数据--------------")
            })
        },
        //视频监控
        getVideo() {
            request({
                url: `v1/camera/videoList?equipment_id=${this.id}`,
                method: "GET",
            }).then(res => {
                console.log(res, "视频监控----------")
                this.videos = res.data.result.list.data[0].video
                console.log(this.videos)
            })
        },
        onClickItem(index) {
            if (this.current !== index) {
                this.current = index;
                if (index === 0) {
                    let showTips0 = uni.getStorageSync("equipmentManagement")
                    if (!showTips0.includes("equipment_detail")) {
                        uni.showModal({
                            title: "你暂无权限,请联系管理员",
                            showCancel: false,
                            success: function (res) {}
                        });
                    }
                }
                if (index === 1) {
                    let showTips0 = uni.getStorageSync("controlCenter")
                    if (!showTips0.includes("data_newData")) {
                        uni.showModal({
                            title: "你暂无权限,请联系管理员",
                            showCancel: false,
                            success: function (res) {}
                        });
                    }

                }
                if (index === 2) {
                    let showTips0 = uni.getStorageSync("dataCenter")
                    if (!showTips0.includes("data_list")) {
                        uni.showModal({
                            title: "你暂无权限,请联系管理员",
                            showCancel: false,
                            success: function (res) {}
                        });
                    } else {
                        this.getData({
                            equipment_id: this.id,
                            type_id: this.tId,
                            date: this.getYear(),
                            near_hour: 24,
                        })
                        this.history.date = this.getYear()
                    }

                }
                if (index === 3) {
                    let showTips0 = uni.getStorageSync("camera_videoList")
                    if (!showTips0.includes("camera_videoList")) {
                        uni.showModal({
                            title: "你暂无权限,请联系管理员",
                            showCancel: false,
                            success: function (res) {}
                        });
                    }

                }
            }
        },
        bindPickerChange(e) {
            console.log(e)
            console.log("picker发送选择改变，携带值为", e.target.value);
            this.index = e.target.value;
        },
        //日期筛选
        bindPickerDay(e) {
            console.log(e)
            this.history.date = e.target.value;
            console.log(this.history.date);
            if (this.history.date != this.getYear()) {
                this.getData({
                    equipment_id: this.id,
                    type_id: this.tId,
                    date: this.history.date,
                    near_hour: 24,
                })
            } else {
                this.getData({
                    equipment_id: this.id,
                    type_id: this.tId,
                    date: this.history.date,
                    near_hour: 24,
                })
                this.history.date = this.getYear()
            }
        },
        onHiotryItem(index) {
            if (this.history.currentIndex !== index) {
                this.history.currentIndex = index;
            }
            // console.log(index,"::::::::::::::::::::::::::::::::::")
            if (index === 0) {
                uni.request({
                    url: "https://yl.solid-cn.com/wechat/v1/data/history",
                    method: "GET",
                    data: {
                        equipment_id: this.id,
                        type_id: this.tId,
                        date: this.getYear(),
                        near_hour: 2,
                    }
                }).then(res => {
                    console.log(res)
                    this.realTime.table2 = res[1].data.result.list.data
                    let hmArray = res[1].data.result.list.data.map(item => {
                        return item.hm
                    })
                    console.log(hmArray, "返回了数组")
                    this.LineA.categories = hmArray.slice(0, 10)
                    let valueAarray = res[1].data.result.list.data.map(item => {
                        return item.data_value
                    })
                    this.LineA.series[0].data = valueAarray.slice(0, 10)
                    if (this.history.date != this.getYear()) {
                        this.history.date = this.getYear()
                    }
                })
            } else if (index === 1) {
                uni.request({
                    url: "https://yl.solid-cn.com/wechat/v1/data/history",
                    method: "GET",
                    data: {
                        equipment_id: this.id,
                        type_id: this.tId,
                        date: this.getYear(),
                        near_hour: 4,
                    }
                }).then(res => {
                    console.log(res)
                    this.realTime.table2 = res[1].data.result.list.data
                    let hmArray = res[1].data.result.list.data.map(item => {
                        // console.log(item.hm)
                        return item.hm
                    })
                    // console.log(hmArray, "返回了数组")
                    // this.$set(this.LineA,"categories",hmArray)
                    this.LineA.categories = hmArray.slice(0, 10)
                    let valueAarray = res[1].data.result.list.data.map(item => {
                        return item.data_value
                    })
                    this.LineA.series[0].data = valueAarray.slice(0, 10)
                })
                if (this.history.date != this.getYear()) {
                    this.history.date = this.getYear()
                }
            }
        },
        getServerData() {
            this.showLineA("canvasLineA", this.LineA);
        },
        showLineA(canvasId, chartData) {
            canvaLineA = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: "line",
                fontSize: 11,
                legend: false,
                dataLabel: false,
                dataPointShape: true,
                background: "#FFFFFF",
                pixelRatio: _self.pixelRatio,
                categories: chartData.categories,
                series: chartData.series,
                animation: true,
                xAxis: {
                    labelCount: 12,
                    // boundaryGap:cen
                    rotateLabel: true,
                    disableGrid: true,
                    // scrollShow: true,
                    // itemCount: 25,
                    // enableScroll: true,
                    type: "grid",
                    gridColor: "#CCCCCC",
                    gridType: "dash",
                    dashLength: 8
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#CCCCCC",
                    dashLength: 8,
                    splitNumber: 5,
                    min: 0,
                    max: 1,
                    format: val => {
                        return val.toFixed(0);
                    }
                },
                width: _self.cWidth * _self.pixelRatio,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    line: {
                        type: "straight"
                    }
                }
            });
        },
        touchLineA(e) {
            canvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                }
            });
        },
        operate(item) {
            console.log(item)

            let than = this
            uni.showModal({
                content: "确认下发？",
                success: function (res) {
                    // if (than.inputValue === "") {
                    //     return uni.showToast({
                    //         title: "下发内容不能为空",
                    //         duration: 2000,
                    //         icon: "none"
                    //     });
                    // }
                    if (res.confirm) {
                        let formitem = {
                            register_id: item.id,
                            data_value: item.type == 2 ? item.switchData : item.equipment_data
                        }
                        request({
                            url: `v1/data/sendOutRegister`,
                            method: "GET",
                            data: formitem,
                        }).then(res => {
                            console.log(res, "----------------------")
                            if (res.data.message === "success") {
                                // than.inputValue = " "
                                uni.showToast({
                                    title: res.data.result,
                                    duration: 2000
                                });
                            } else if (res.data.errorCode === 704) {
                                // uni.showToast({
                                // title: "下发失败,请先从历史数据选择寄存器",
                                // duration: 2000,
                                // icon: "none"
                                // });
                            }
                        })
                        console.log("用户点击确定", res);

                    } else if (res.cancel) {
                        console.log("用户点击取消");
                    }
                }
            });
            // console.log(e);
        },
        checkHistory(item) {
            console.log(item, ":::::::::::::::::::")
            uni.navigateTo({
                url: `devHistory/devHistory?id=${item.id}`,
                success: res => {},
                fail: () => {},
                complete: () => {}
            });
        },
    },
    components: {
        uniLoadMore,
        uniSegmentedControl,
        Row,
        QSpicker
    }
};
</script>

<style lang="scss">
$tbg: #e4ecf3;
$trbg: #f1f6f9;

.tdIn {
    display: flex;

    .tdInImage {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        left: 133rpx;
        top: 5rpx;

    }
}

.nav {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.nav2 {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.details-page {}

.register {
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    line-height: 58rpx;
}

.selectTop {
    font-size: 22rpx;
    color: red;
    margin-left: 10rpx;
    position: absolute;
    top: 74rpx;
}

.tab-info {
    padding: $spacing-x;

    image {
        display: block;
        width: 100%;
    }

    .txt-box {
        border-width: 10rpx;
        padding: $spacing-x 0;

        view {
            position: relative;
            padding-left: $spacing-x;
            margin-bottom: $spacing-s;
        }

        text {
            font-size: $fs-base-x;
            display: inline-block;
            vertical-align: middle;
        }

        .tg {
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background: $color-success;
            position: absolute;
            left: 0;
            top: 18rpx;
        }
    }
}

.rank_type {
    text-align: center;
    margin-top: 100rpx;
}

//实时数据
.real-time {
    .td {
        width: 33.33%;

    }
}

// 历史数据
.history {
    .td {
        width: 33.33%;

    }

    .picker-box {
        margin-top: $spacing-center;
        padding: 0 $spacing-center;

        .picker-item {
            .flex-box {
                align-items: center;
                padding: 12rpx 15rpx;

                .td {
                    width: 33.33%;

                }

                .fx1 {
                    font-size: 32rpx;
                    display: flex;
                    justify-content: center;
                    font-size: $fs-base-x;
                }
            }

            flex: 1;
            height: 60rpx;
            background: #e4ecf3;
            border: 1rpx solid $border-grey;
            border-radius: 10rpx;

            &:nth-child(1) {
                margin-right: $spacing-center + 10;
            }

            .drop {
                width: 30rpx;
                height: 30rpx;
                background: url(../../static/images/icon/icon_drop_down@2x.png) no-repeat center;
                background-size: cover;
            }

            .calender {
                width: 30rpx;
                height: 30rpx;
                background: url(../../static/images/icon/icon_calender@2x.png) no-repeat center;
                background-size: cover;
            }
        }
    }

    .history-tab {
        .pd {
            padding: $spacing-center;
        }

        .segmented-control {
            width: 100%;
            border: none;
        }

        .segmented-control-item {
            background-color: #e4ecf3;
        }

        .active {
            background: $color-theme-blue;
        }

        .table-box {

            // flex: 4;
            .td {
                background: inherit;
                display: inline-block;
                width: 0rpx;
                padding: 25rpx 0;
                box-sizing: border-box;
            }
        }

        .qiun-charts {
            width: 750upx;
            height: 500upx;
            background-color: #ffffff;
            margin-bottom: $spacing-center;
        }

        .charts {
            width: 750upx;
            height: 500upx;
            background-color: #ffffff;
        }
    }
}

.videos {
    .video-box {
        padding: $spacing-x;
        flex-wrap: wrap;

        .item {
            width: 49%;
            margin-bottom: $spacing-center;
            border-radius: 30upx;

            &:nth-child(odd) {
                margin-right: 2%;
            }
        }

        video {
            width: 100%;
            height: 400upx;
        }
    }
}

.device-control {
    .td {
        width: 186rpx;

        .tdValue {
            display: flex;
            justify-content: center;

        }

        .mini-btn {
            padding: 15rpx;
            border-radius: 0;
        }
    }
}

.noData {
    display: flex;
    justify-content: center;
    position: relative;
    top: 50rpx;
    left: 250rpx;

}
</style>
